// 基础过渡效果
.v-leave {
    opacity: 1;
    transform: translateY(0);
}

.v-leave-active {
    transition: all 0.3s ease;
    will-change: opacity, transform; // 提升性能
}

.v-enter {
    opacity: 0;
    transform: translateY(20px);
}

.v-enter-active {
    transition: all 0.5s ease;
    will-change: opacity, transform; // 提升性能
}

// 新增淡入淡出效果
.fade-leave {
    opacity: 1;
}

.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter {
    opacity: 0;
}

.fade-enter-active {
    transition: opacity 0.5s ease;
}

// 新增缩放效果
.scale-leave {
    transform: scale(1);
}

.scale-leave-active {
    transition: transform 0.3s ease;
}

.scale-enter {
    transform: scale(0.8);
}

.scale-enter-active {
    transition: transform 0.5s ease;
}

// 新增滑动效果
.slide-leave {
    transform: translateX(0);
}

.slide-leave-active {
    transition: transform 0.3s ease;
}

.slide-enter {
    transform: translateX(100%);
}

.slide-enter-active {
    transition: transform 0.5s ease;
}